<template>
  <div>
    <div>
      <span>发布任务</span>
    </div>
    <div class="titleItemContainer">
      <span class="floatLeft inputLabel ">职位名称：</span>
      <el-input class="inputStyle floatLeft"></el-input>
    </div>
    <div class="titleItemContainer">
      <span class="floatLeft inputLabel ">企业名称：</span>
      <el-input class="inputStyle floatLeft"></el-input>
    </div>
    <div class="titleItemContainer">
      <span class="floatLeft inputLabel ">企业规模：</span>
      <el-select class='floatLeft' v-model="value" placeholder="请选择">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
    </div>
    <div class="titleItemContainer">
      <span class="floatLeft inputLabel ">所属行业：</span>
      <el-select class='floatLeft' v-model="value" placeholder="请选择">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
      <el-select class='floatLeft' v-model="value" placeholder="请选择">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
    </div>
    <div class="titleItemContainer">
      <span class="floatLeft inputLabel ">职能：</span>
      <el-select class='floatLeft' v-model="value" placeholder="请选择">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
      <el-select class='floatLeft' v-model="value" placeholder="请选择">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
    </div>
    <div class="titleItemContainer">
      <span class="floatLeft inputLabel ">年薪：</span>
      <el-input class="inputStyle floatLeft"></el-input>
    </div>
    <div class="titleItemContainer">
      <span class="floatLeft inputLabel ">工作地点：</span>
      <area-select class='floatLeft' :level='2' type='text' v-model="address" :data="pcaa"></area-select>
    </div>
    <div class="titleItemContainer">
      <span class="floatLeft inputLabel ">工作地点：</span>
      <el-select class='floatLeft' v-model="value" placeholder="请选择">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
    </div>
    <div class="titleItemContainer">
      <span class="floatLeft inputLabel ">招聘人数：</span>
      <el-input class="inputStyle floatLeft"></el-input>
    </div>
    <div class="titleItemContainer">
      <span class="floatLeft inputLabel ">截止时间：</span>
      <el-input class="inputStyle floatLeft"></el-input>
    </div>
    <div class="titleItemContainer">
      <span class="floatLeft inputLabel ">悬赏金额：</span>
      <el-input class="inputStyle floatLeft"></el-input>
    </div>
    <div class="titleItemContainer">
      <span class="floatLeft inputLabel ">需冻结赏金：</span>
      <span>￥---</span>
    </div>
    <div class="titleItemContainer">
      <span class="floatLeft inputLabel ">岗位职责：</span>
      <el-input type='textarea' class="inputStyle floatLeft"></el-input>
    </div>
    <div class="titleItemContainer">
      <span class="floatLeft inputLabel ">任职要求：</span>
      <el-input type='textarea' class="inputStyle floatLeft"></el-input>
    </div>
    <div class="titleItemContainer">
      <span class="floatLeft inputLabel ">企业简介：</span>
      <el-input type='textarea' class="inputStyle floatLeft"></el-input>
    </div>
    <div class="titleItemContainer">
      <span class="floatLeft inputLabel ">任务标签：</span>
      <el-input type='textarea' class="inputStyle floatLeft"></el-input>
    </div>
    <div class="titleItemContainer">
      <div class="centerInHorizontal">
        <el-button type="primary" class="floatLeft">保存</el-button>
        <el-button type="primary" class="floatLeft">发布</el-button>
      </div>
    </div>
  </div>
</template>
<style scoped>
.titleItemContainer {
  margin-left: 50px;
  margin-top: 20px;
}

.titleItemContainer::after {
  content: '';
  display: table;
  clear: both;
}

.inputStyle {
  width: 300px;
  margin-left: 10px;
}

.inputLabel {
  margin-top: 10px;
  margin-left: 10px;
  display: block;
  width: 100px;
  text-align: right;
}

.floatLeft {
  float: left;
}

.centerInHorizontal {
  margin: 0 auto;
  width: 400px;
  text-align: center;
}
</style>
<script>
import { pca, pcaa } from 'area-data'
export default {
  data: function() {
    return {
      pca,
      pcaa
    }
  }
}
</script>
